import React, { useState, useEffect, useRef, memo } from 'react';
import '../index.less';
import cls from 'classnames';
import styles from '../index.mod.less';
import { Tabs, Progress, Select } from 'antd';
// import CustomPanel from '@/components/containers/customPanel';
import { connect, useSelector, useDispatch } from 'umi';
import { typeName, colData } from '../data';
// import Chart1 from './chart1';
import Panel3 from './Panel3';
import Panel2 from './Panel2';

const { Option } = Select;
const { TabPane } = Tabs;

// 左上面板
const LeftPanel = () => {
  let preLastIndex = 0;

  const [curColIndex, setCurColIndex] = useState(0);

  return (
    <div className="side-panel2 main-l-panel" style={{ top: 88, left: 24 }}>
      <div className="side-panel2-title"></div>
      <div
        className={cls('side-panel2-body')}
        style={{
          padding: 16,
          paddingRight: 0,
          height: 'calc(100vh - 484px)',
        }}
      >
        <Tabs
          tabBarExtraContent={{ left: <div style={{ width: 40, height: 1 }} /> }}
          defaultActiveKey="1"
          // onChange={callback}
          style={{ position: 'relative', top: -60, lineHeight: '20px' }}
          tabBarStyle={{ color: '#fff' }}
        >
          {/* <TabPane tab="项目统计" key="1" style={{ paddingRight: 16 }}>
            <Panel2 />
          </TabPane> */}
          {/*
          <TabPane tab="投资指标" key="2">
            <div style={{ marginBottom: 12 }}>
              <Select defaultValue="0" size={'small'} style={{ marginRight: 10 }}>
                <Option value={'0'}>市政工程</Option>
              </Select>
              <Select
                defaultValue="0"
                size={'small'}
                style={{ width: 120 }}
                onChange={setCurColIndex}
              >
                {colData.map((col, i) => {
                  return (
                    <Option key={i} value={`${i}`}>
                      {col[0]}
                    </Option>
                  );
                })}
              </Select>
            </div>
            <div className={styles.statics}>
              {typeName.map((type, i) => {
                const startIndex = preLastIndex + 1;
                return (
                  <div className={styles.item2} key={i}>
                    <div className={styles.item2Title}>{type.name}</div>
                    <div className={styles.item2Content}>
                      {colData[curColIndex]
                        .slice(startIndex, startIndex + type.subNameArr.length)
                        .map((content, j) => {
                          if (!j) {
                            preLastIndex += type.subNameArr.length + 1;
                          }
                          return (
                            <div key={type.subNameArr[j]} className={styles.item2Block}>
                              <p>{type.subNameArr[j]}</p>
                              <span>{content}</span>
                            </div>
                          );
                        })}
                    </div>
                  </div>
                );
              })}
            </div>
          </TabPane> */}

          <TabPane tab="项目统计" key="3" style={{ paddingRight: 16 }}>
            <Panel3 />
          </TabPane>
          <TabPane tab="项目状态" key="4" style={{ paddingRight: 16 }}>
            <h1>项目状态</h1>
          </TabPane>
        </Tabs>
      </div>
    </div>
  );
};

export default LeftPanel;
